
    <!-- 引入vue -->
    <script src="/static/plugins/vue/vue.min.js"></script>
    <script src="/static/plugins/element-ui/element-ui.js"></script>
    <link rel="stylesheet" href="/static/plugins/element-ui/element-ui.css">
<div class="form-group col-lg-12 col-md-12 col-sm-12 col-xs-12" id="form_group_{$form.name}">
    <div class="col-xs-12 col-xs-12 col-md-1 label-title" for="{$form.name}">{$form.title|htmlspecialchars}：</div>
    <div class="col-sm-12 col-xs-12 col-md-4" id='com'>
        <!-- <select class="select2 form-control" id="{$form.name}" name="{$form.name}[]" {$form.attr|default=''} multiple="multiple">
            <option value="">请选择</option>
            {volist name="form.extra" id="option"}
            <option value="{$key}" {if (in_array($key, explode(',',$form.value)))}selected{/if}>{$option|raw}</option>
            {/volist}
        </select> -->
        <input type="hidden" name="cid" v-model='goods_cid'>
        <el-cascader
        size='small'
        :options="goodsOptions"
        v-model='goods_cid_list'
        :props="{ checkStrictly: true,
        value:'id',
        label:'name',
        children:'children'}"
        clearable
        @change='goodsOptionsChange'
        ref="cascaderHandle" 
        :show-all-levels="false" 
        filterable></el-cascader>
        {notempty name="form.tips"}
        <div class="help-block">{$form.tips|raw}</div>
        {/notempty}
    </div>
</div>
<script>
     new Vue({
      el: '#com',
      data: function() {
        return {
			goods_cid_list:[], // 商品分类id的多级信息
            goods_cid:'',  //商品分类id
            cid:{$form.value}, // cid
            goodsOptions:[], // 商品分类
            timer:null, // 定时器
        }
    },
    mounted() {

        // this.goods_cid = 
        this.goods_cid =this.cid
        this.getGoodsOptions()
          	  // 点击文字即选中
		this.timer =  setInterval(function() {
　　　　　　document.querySelectorAll(".el-cascader-node__label").forEach(el => {
　　　　　　　　el.onclick = function() {
　　　　　　　　　　if (this.previousElementSibling) this.previousElementSibling.click();
　　　　　　　　};
　　　　　　});
　　　　}, 1000);
    },
    destroyed(){
		clearInterval(this.timer)
	  },
    methods: {
		  	// 处理cid在三级联动的位置,
			  getCidList(val,id){
						let cid_list =[]
						val.forEach((item,index)=>{
							if(item.id ==id){
								cid_list = [item.id]
								return false
							}else{
								if(item.children){
									let newCid_list =[item.id]
									let list = nodefun(item.children,id,newCid_list)
									if(list) {
										cid_list =list
									}
								}
							}
						})
						// 递归函数
						function nodefun(newVal,newId,newCid_list){
							let flag =false
							newVal.forEach(j=>{
								// console.log(j)
								if(j.id == newId){
									newCid_list.push(j.id)
									flag =true
								}else{
									if(j.children){
										let	cid_list = JSON.parse(JSON.stringify(newCid_list))
										cid_list.push(j.id)
										let list =  nodefun(j.children,newId,cid_list)
										if(list){
											newCid_list =list 
											flag =true
										}
									}

								}
							})
							if(flag){
								return	newCid_list						
							}
						}
						return	cid_list
			},
		 getQueryVariable(variable){
			var query = window.location.search.substring(1);
			var vars = query.split("&");
			for (var i=0;i<vars.length;i++) {
					var pair = vars[i].split("=");
					if(pair[0] == variable){return pair[1];}
				}
				return(false);
			},

		  // 获取分类接口数据
		getGoodsOptions(){
			let that =this
			$.get("/admin.php/goods/category/getcategorylist",function(data,status){
			   if(data.code == 1){
				console.log('获取商品分类',data.data)
				that.goodsOptions =data.data
				// 递归获取cid的位置
				if(that.goods_cid){
					that.goods_cid_list = 	that.getCidList(that.goodsOptions,that.goods_cid)
				}
			   }else{
				  that.$message({
						message: data.msg,
						type: 'warning'
					});
			   }
			
			})
		},
		// 商品分类选择改变时
		goodsOptionsChange(e){
			if(this.goods_cid_list.length>0){
				this.goods_cid = this.goods_cid_list[this.goods_cid_list.length-1]
			}else{
				this.goods_cid =''
			}
			// this.$refs.cascaderHandle.dropDownVisible = false; //监听值发生变化就关闭它
			// 监听是否为最后一级，如果为最后一级，面板收起
			var children = this.$refs.cascaderHandle.getCheckedNodes();
          if(children[0].children.length < 1){   //判断有没有下级
            this.$refs.cascaderHandle.dropDownVisible = false; //监听值发生变化就关闭它
		  }
			console.log(e,this.goods_cid)
        },
    }
})

</script>